<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./project1/node_modules/vue/dist/vue.js"></script>
  <style>
    [v-cloak] {
      opacity: 0;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    数字是{{count}}
  </div>
  <script>
    setTimeout(() => {
      let vm = new Vue({
        data() {
          // data中的属性最终都会被挂在到当前实例上
          // vue 在初始化的是会把data中的所有属性挨个劫持
          return {
            count: 123
          }
        }
      })
      vm.$mount('#app')
    }, 5000);
  </script>
</body>

</html>
<script>
  let obj = {
    w: 23
  }
  obj.qq = 123
  // defineProperty 是vue2实现双向数据绑定的一个核心api
  // Object.defineProperty(obj, 'ww', {
  //   // value: 123,
  //   // enumerable: true
  //   get: function proxyGetter() {
  //     // 当外界调用的时候会触发这个函数  外界获取到的值就是 这个函数的返回值
  //     console.log('get函数调用了')
  //     return 666
  //   },
  //   set(val) {
  //     // 当外界给这个属性赋值的时候触发
  //     console.log('set执行了', val)
  //   }
  // })
  // console.log(obj)

  // Proxy 把整个对象进行了一个代理
  // defineProperty 是把对象中的每一个属性进行了劫持

  let mishu = new Proxy(obj, {
    get(target, key) {
      console.log(key, '属性被调用了', target == obj)
      return target[key]
    },
    set(target, key, val) {
      console.log(key, '属性被赋值了，值是', val)
      target[key] = val
    }
  })
</script>